<template>
  <t-image-viewer v-if="!store.isMobileType" v-model:visible="ImgVisible" :images="[urls + props.info.value]">
  </t-image-viewer>
  <van-image-preview :show-index="false" v-else v-model:show="ImgVisible" :images="[urls + props.info.value]">
  </van-image-preview>
  <div class="outline-parent jy-style-height">
    <div
      class="outline-parent-bg border-hover-style"
      :style="{
        backgroundImage: props.info.value
          ? `url(${publicUrls + 'free/style9/thirdLevelStyle1Bg.webp'})`
          : `url(${publicUrls + 'free/style9/thirdLevelStyle1NullImgBg.webp'})`,
      }"
    >
      <div class="outline-content-left">
        <p class="title">{{ props.info.text }}</p>
      </div>
      <div class="outline-content-right" :class="{ 'null-sub-img': !props.info.value }">
        <div
          class="unit-img-box"
          :class="{ 'unit-img-box2': !props.info.subTitle && !props.info.remarks }"
          :style="{
            backgroundImage: `url(${publicUrls + 'free/style9/thirdStyle1ImgIcon.png?imageView2/format/webp'})`,
          }"
          v-if="props.info.value"
        >
          <div class="only-img-title" v-if="!props.info.subTitle && !props.info.remarks">
            <img
              @click="ImgVisible = true"
              :src="urls + props.info.value + '?imageView2/3/format/webp'"
              alt=""
              class="unit-img"
            />
          </div>
          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 296 214" fill="none" v-else>
            <g filter="url(#filter0_d_900_9015)">
              <mask id="path-1-inside-1_900_9015" fill="white">
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M27 1C20.3726 1 15 6.37258 15 13L14 13C7.37258 13 2 18.3726 2 25V190C2 196.627 7.37258 202 14 202H15V203C15 209.627 20.3726 215 27 215H272C278.627 215 284 209.627 284 203V202H286C292.627 202 298 196.627 298 190V25C298 18.3726 292.627 13 286 13H284C284 6.37258 278.627 1 272 1H27Z"
                />
              </mask>
              <path
                d="M15 13L15 15L17 15V13H15ZM14 13V15H14L14 13ZM15 202H17V200H15V202ZM284 202V200H282V202H284ZM284 13H282V15H284V13ZM17 13C17 7.47715 21.4772 3 27 3V-1C19.268 -1 13 5.26801 13 13H17ZM14 15L15 15L15 11L14 11L14 15ZM4 25C4 19.4772 8.47715 15 14 15V11C6.26801 11 0 17.268 0 25H4ZM4 190V25H0V190H4ZM14 200C8.47715 200 4 195.523 4 190H0C0 197.732 6.268 204 14 204V200ZM15 200H14V204H15V200ZM17 203V202H13V203H17ZM27 213C21.4772 213 17 208.523 17 203H13C13 210.732 19.268 217 27 217V213ZM272 213H27V217H272V213ZM282 203C282 208.523 277.523 213 272 213V217C279.732 217 286 210.732 286 203H282ZM282 202V203H286V202H282ZM286 200H284V204H286V200ZM296 190C296 195.523 291.523 200 286 200V204C293.732 204 300 197.732 300 190H296ZM296 25V190H300V25H296ZM286 15C291.523 15 296 19.4772 296 25H300C300 17.268 293.732 11 286 11V15ZM284 15H286V11H284V15ZM272 3C277.523 3 282 7.47715 282 13H286C286 5.26801 279.732 -1 272 -1V3ZM27 3H272V-1H27V3Z"
                fill="url(#paint0_radial_900_9015)"
                mask="url(#path-1-inside-1_900_9015)"
              />
            </g>
            <defs>
              <filter
                id="filter0_d_900_9015"
                x="0"
                y="0"
                width="296"
                height="214"
                filterUnits="userSpaceOnUse"
                color-interpolation-filters="sRGB"
              >
                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                <feColorMatrix
                  in="SourceAlpha"
                  type="matrix"
                  values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                  result="hardAlpha"
                />
                <feOffset dy="1" />
                <feGaussianBlur stdDeviation="1" />
                <feComposite in2="hardAlpha" operator="out" />
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0" />
                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_900_9015" />
                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_900_9015" result="shape" />
              </filter>
              <radialGradient
                id="paint0_radial_900_9015"
                cx="0"
                cy="0"
                r="1"
                gradientUnits="userSpaceOnUse"
                gradientTransform="translate(150 1) rotate(90) scale(214 235.782)"
              >
                <stop stop-color="#D7C3AA" />
                <stop offset="1" stop-color="#AB9A82" />
              </radialGradient>
            </defs>
            <image
              @click="ImgVisible = true"
              mask="url(#path-1-inside-1_900_9015)"
              :xlink:href="urls + props.info.value + '?imageView2/3/format/webp'"
              width="100%"
              height="100%"
              x="0"
              y="0"
              preserveAspectRatio="none"
            />
          </svg>
        </div>
        <p class="sub-title" v-if="props.info.subTitle">——{{ props.info.subTitle }}</p>
        <div class="remarks1" v-if="(props.info.value || props.info.subTitle) && props.info.remarks">
          <TextMax
            :infoData="props.info"
            v-if="props.domShow"
            :data="props.info.remarks"
            :title="props.info.text"
            :row="7"
          ></TextMax>
        </div>
        <div class="remarks2" v-else-if="props.info.remarks">
          <TextMax
            :infoData="props.info"
            v-if="props.domShow"
            :data="props.info.remarks"
            :title="props.info.text"
            :row="9"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'free9Style1',
});
</script>
<script lang="ts" setup>
import { publicUrls } from '@/utils/minxin';
import digitalShowroomIcon from '@/freeComponents/unitdigitalShowroom/style9.vue';
import textMode from '../../../textMode/textMode.vue';
import { urls } from '@/utils/request/upload';
import TextMax from '@/freeComponents/textMode/TextMax9.vue';
import { defineComponent, ref } from 'vue';
import { useProjectStore } from '@/store';
const store = useProjectStore();

const ImgVisible = ref(false);

const props = defineProps({
  info: {
    type: Object,
  },
  domShow: {
    type: Boolean,
  },
});

// 跳转全景链接
const open = (url: any) => {
  if (url) {
    window.open(url, '_blank');
  }
};
</script>

<style lang="less" scoped>
.outline-parent {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-right: 160px;
}
.outline-parent-bg {
  position: relative;
  width: 482px;
  height: 684px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
}
.null-sub-img {
  justify-content: flex-end;
}
.outline-content-left {
  width: 50px;
  height: 532px;
  margin-top: 76px;
  margin-left: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.title {
  color: #8a7a6a;
  letter-spacing: 10px;
  text-align: center;
  /* 三级标题 */
  font-family: 'SourceHanSerifCN';
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px; /* 150% */
  writing-mode: vertical-rl;
}
.outline-content-right {
  width: 380px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 30px;
  padding-top: 36px;
  padding-bottom: 48px;
}
.unit-img-box {
  flex-shrink: 0;
  width: 340px;
  height: 256px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: 100% 100% !important;
  margin-top: 3px;
  margin-right: 3px;
  padding: 25px;
}
.unit-img-box2 {
  flex: 1;
}
.only-img-title {
  width: 100%;
  height: 100%;
  .unit-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.sub-title {
  flex-shrink: 0;
  width: 324px;
  color: #8a7a6a;
  text-align: center;

  /* 三级副标 */
  font-family: 'Source Han Serif CN';
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px; /* 175% */
  margin-top: 32px;
}
.remarks1 {
  flex-shrink: 0;
  width: 320px;
  margin-top: 32px;
}
.remarks2 {
  width: 320px;
  flex-shrink: 0;
  margin-top: 32px;
  min-height: 128px;
}
</style>
